<template>
    <view class="pages-dynamic" v-if="isLoad">
        <block v-if="configInfo.plugAuth.dynamic">
            <fixed>
                <uni-nav-bar
                    :fixed="false"
                    :shadow="false"
                    :statusBar="true"
                    title="动态"
                    color="#ffffff"
                    :backgroundColor="primaryColor"
                >
                </uni-nav-bar>
                <view class="fix-info fill-body rel">
                    <view
                        class="space-top abs"
                        :style="{ background: primaryColor }"
                    ></view>
                    <view
                        class="search-info fill-base pt-lg pl-lg pr-lg pb-md abs"
                    >
                        <view class="flex-center pb-md">
                            <view
                                @tap.stop="$refs.show_item.open()"
                                v-if="coach_status == 1"
                                class="dynamic-btn flex-center f-caption mr-lg radius"
                                :style="{
                                    color: primaryColor,
                                    border: `1rpx solid ${primaryColor}`,
                                }"
                            >
                                <i class="iconfont icon-jia-bold"></i>
                                发动态
                            </view>
                            <view class="flex-1">
                                <search
                                    @input="toSearch"
                                    type="input"
                                    :padding="0"
                                    :radius="30"
                                    backgroundColor="#F0F0F0"
                                    :placeholder="
                                        '请输入' +
                                        $t('action.attendantName') +
                                        '姓名'
                                    "
                                >
                                </search>
                            </view>
                        </view>
                        <tab
                            @change="handerTabChange"
                            :list="tabList"
                            :activeIndex="activeIndex * 1"
                            :activeColor="primaryColor"
                            width="50%"
                            height="90rpx"
                            fontSize="28rpx"
                            :numberType="2"
                            lineClass="sm"
                        ></tab>
                        <view class="catebg">
                            <view
                                class="flex align-center flex-column margin-right-30"
                                v-for="(item, index) in catelist"
                                :key="index"
                                @click="choseSecond(item.id, index)"
                            >
                                <image
                                    :class="
                                        second_id == item.id
                                            ? 'border-06'
                                            : 'border-ff'
                                    "
                                    :src="item.cover"
                                    mode=""
                                    class="coverimg margin-bottom-20"
                                ></image>
                                <view
                                    :class="
                                        second_id == item.id
                                            ? 'fenlei_active'
                                            : 'fenlei'
                                    "
                                    >{{ item.title }}</view
                                >
                            </view>
                        </view>
                        <!-- 	<view class="fill-base" style="overflow: hidden;position: relative;" v-if="catelist.length > 0">
							<column @change="goCate" :list="catelist" :indicatorActiveColor="primaryColor" :colNum="6"
								:rowNum="1">
							</column>
							<view class="allbtn" @click="goServer()">
								<image src="https://api.qiancdj.com/img/qbfl.png" mode="" class="column-img"></image>
								<view class='column-text'>全部分类</view>
							</view>
						</view>
						<view class="top_fenlei">
							<view :class="second_id==item.id?'fenlei_active':'fenlei'"
								v-for="(item, index) in secondlist" :key="index" @click="choseSecond(item.id,index)">
								{{ item.title }}
							</view>
						</view> -->
                    </view>
                </view>
            </fixed>
            <!-- <image src="../../s" mode=""></image> -->
            <view class="space-md"></view>
            <!-- <wfalls-flow :list="list.data" :path="1" ref="dynamic_wfalls" v-if="list.data.length > 0"></wfalls-flow> -->
            <view class="listbox">
                <view
                    class="demo-warter"
                    v-for="(item, index) in list.data"
                    :key="index"
                    @click="goDetail(item.id)"
                >
                    <image
                        :src="item.cover"
                        mode="widthFix"
                        style="width: 100%"
                    ></image>
                    <view class="wf-item">
                        <view class="text-bold padding-10">{{
                            item.title
                        }}</view>
                        <!-- <view class="flex-between mt-sm" v-if="item.distance">
							<view class="flex-center">
								<image mode="aspectFill" class="avatar" :src="item.work_img"></image>
								<view class="coach f-caption c-desc ellipsis">{{item.coach_name}}</view>
							</view>
							<view class="flex-y-baseline f-caption c-desc"> <i class="iconfont iconjuli"
									:style="{color:primaryColor}"></i>
								{{item.distance}}
							</view>
						</view> -->
                        <view class="flex-between mt-sm" v-if="item.goods">
                            <view class="flex-center">
                                <image
                                    mode="aspectFill"
                                    class="avatar"
                                    :src="item.goods.shop.avatar"
                                ></image>
                                <view class="coach f-caption c-desc ellipsis">{{
                                    item.goods.shop.shopname
                                }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <load-more
                :noMore="
                    list.current_page >= list.last_page && list.data.length > 0
                "
                :loading="loading"
                v-if="loading"
            >
            </load-more>
            <abnor
                v-if="
                    !loading && list.data.length <= 0 && list.current_page == 1
                "
            ></abnor>
        </block>
        <block v-else>
            <abnor
                :tip="[
                    {
                        text: '当前页面没有权限，请点击导航栏切换页面',
                        color: 0,
                    },
                ]"
                image="https://lbqny.migugu.com/admin/anmo/technician/no_data.png"
            ></abnor>
        </block>

        <view class="space-footer"></view>
        <view :style="{ height: `${configInfo.tabbarHeight}px` }"></view>
        <!-- <tabbar :cur="3"></tabbar> -->
        <u-tabbar
            v-model="current"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#888"
            :list="tabbarList"
        ></u-tabbar>
        <!-- #ifdef APP-PLUS -->
        <login-info></login-info>
        <!-- #endif -->

        <uni-popup ref="show_item" type="bottom">
            <view class="show-popup pd-lg">
                <view
                    @tap.stop="toAddDynamic(1)"
                    class="show-item flex-center f-paragraph mt-md radius-16"
                    >发布图片
                </view>
                <view
                    @tap.stop="toAddDynamic(2)"
                    class="show-item flex-center f-paragraph mt-md radius-16"
                    >发布视频
                </view>
                <view
                    @tap.stop="$refs.show_item.close()"
                    class="show-item flex-center f-paragraph mt-md radius-16"
                    :style="{ color: primaryColor }"
                    >取消</view
                >
                <view class="space-safe"></view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

import { mapState, mapActions, mapMutations } from "vuex";
import siteInfo from "@/siteinfo.js";
import tabbar from "@/components/tabbar.vue";
import back from "@/components/back.vue";
import wfallsFlow from "@/components/wfalls-flow.vue";
export default {
    mixins: [MescrollMixin], // 使用mixin
    components: {
        tabbar,
        wfallsFlow,
        back,
    },
    data() {
        return {
            isLoad: false,
            options: {},
            loading: true,
            lockTap: false,
            catelist: [],
            first_id: "",
            first_index: "",
            second_id: "",
            second_index: "",
            secondlist: [],
            children: "",
            area_id: "",
            tabbarList: [
                {
                    iconPath: "/static/tab/shouye_nor.png",
                    selectedIconPath: "/static/tab/shouye_sel.png",
                    text: "首页",
                },
                {
                    iconPath: "/static/tab/cate_nor.png",
                    selectedIconPath: "/static/tab/cate_sel.png",
                    text: "分类",
                },
                {
                    iconPath: "/static/tab/live_nor.png",
                    selectedIconPath: "/static/tab/live_sel.png",
                    text: "直播",
                },
                {
                    iconPath: "/static/tab/dynamic_nor.png",
                    selectedIconPath: "/static/tab/dynamic_sel.png",
                    text: "动态",
                },

                {
                    iconPath: "/static/tab/wode_nor.png",
                    selectedIconPath: "/static/tab/wode_sel.png",
                    text: "我的",
                },
            ],
            current: 3,
        };
    },
    computed: mapState({
        pageActive: (state) => state.dynamic.pageActive,
        activeIndex: (state) => state.dynamic.activeIndex,
        tabList: (state) => state.dynamic.tabList,
        param: (state) => state.dynamic.param,
        list: (state) => state.dynamic.list,
        coach_status: (state) => state.dynamic.coach_status,
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        autograph: (state) => state.user.autograph,
        userInfo: (state) => state.user.userInfo,
        location: (state) => state.user.location,
        isGzhLogin: (state) => state.user.isGzhLogin,
        haveShieldOper: (state) => state.user.haveShieldOper,
    }),
    async onLoad(options) {
        console.log(this.configInfo.plugAuth, "plugAuth");
        this.children = options.children ? options.children : "";
        console.log(options, "options");
        if (options.area_id) {
            this.area_id = options.area_id;
        }

        this.$util.showLoading();
        options = await this.updateCommonOptions(options);
        this.options = options;
        // #ifndef H5

        this.$util.showLoading();
        // #endif
        await this.initIndex();
        this.updateDynamicItem({
            key: "pageActive",
            val: true,
        });
    },
    watch: {
        tabbarList: {
            handler(newVal, oldVal) {
                if (
                    newVal[2].text == "直播" &&
                    uni.getStorageSync("configInfo").live_switch == 0
                ) {
                    this.current = 2;
                    newVal.splice(2, 1);
                }
            },
            deep: true,
            immediate: true,
        },
    },
    onReady() {
        uni.request({
            url: "https://api.qiancdj.com/index.php?i=666&m=longbing_massages_city&s=massage/app/Index/getCategory&urls=massage/app/Index/getCategory&cate_type=3",
            header: {
                autograph: uni.getStorageSync("autograph"),
            },
            data: {
                children: this.children,
            },
            success: (res) => {
                this.catelist = res.data.data;
                // if (uni.getStorageSync('category_id')) {
                // 	let index = res.data.data.findIndex(item => item.id == uni.getStorageSync(
                // 		'category_id'));
                // 	let timeindex = index == -1 ? 0 : index;
                // 	this.secondlist = res.data.data[timeindex].children
                // 	this.second_id = res.data.data[timeindex].children.length ? res.data.data[timeindex]
                // 		.children[0]
                // 		.id : res.data.data[timeindex].id
                // } else {
                // 	this.secondlist = res.data.data[0].children
                // 	this.second_id = res.data.data[0].children.length ? res.data.data[0].children[0]
                // 		.id : res.data.data[0].id
                // }

                this.getList(1);
            },
        });
    },
    async onShow() {
        // #ifdef H5
        if (this.$jweixin.isWechat()) {
            await this.$jweixin.initJssdk();
            this.toAppShare();
        }
        // #endif
        if (this.haveShieldOper == 1) {
            await this.initIndex();
            this.updateUserItem({
                key: "haveShieldOper",
                val: 0,
            });
        }
    },
    async onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        await this.initRefresh();
        uni.stopPullDownRefresh();
    },
    async onReachBottom() {
        if (this.list.current_page >= this.list.last_page || this.loading)
            return;
        this.param.page = this.param.page + 1;
        this.loading = true;
        await this.getList();
        setTimeout(() => {
            this.$refs.dynamic_wfalls.handleViewRender();
        }, 0);
    },
    onShareAppMessage(e) {
        let { id: pid = 0 } = this.userInfo;
        let path = `/pages/dynamic?pid=${pid}`;
        this.$util.log(path);
        return {
            title: "",
            imageUrl: "",
            path,
        };
    },
    methods: {
        ...mapActions([
            "getConfigInfo",
            "getUserInfo",
            "updateCommonOptions",
            "getDynamicIndex",
            "getDynamicList",
        ]),
        ...mapMutations(["updateUserItem", "updateDynamicItem"]),
        async initIndex(refresh = false) {
            let { pid = 0 } = this.options;

            if (!refresh && this.pageActive && !pid) {
                this.isLoad = true;
                this.loading = false;
                this.$util.hideAll();
                return;
            }

            let { isGzhLogin } = this;
            let { id: uid = 0 } = this.userInfo;
            if (pid && !uid) {
                // #ifdef H5
                if (isGzhLogin) {
                    setTimeout(() => {
                        this.getUserInfo();
                    }, 1000);
                } else {
                    this.getUserInfo();
                }
                // #endif
                // #ifndef H5
                await this.getUserInfo();
                // #endif
            }

            if (
                !this.configInfo.id ||
                refresh ||
                (this.configInfo.id &&
                    !this.configInfo.plugAuth.hasOwnProperty("dynamic"))
            ) {
                await this.getConfigInfo();
            }

            let { dynamic = false } = this.configInfo.plugAuth;
            if (!dynamic) {
                this.isLoad = true;
                this.loading = false;
                this.$util.hideAll();
                return;
            }

            await Promise.all([this.getDynamicIndex()]);
            // this.getList(1)
        },
        async initRefresh() {
            await this.initIndex(true);
        },
        goDetail(id) {
            uni.navigateTo({
                url: "/dynamic/pages/detail?id=" + id,
            });
        },
        toAppShare() {
            let { id: pid = 0 } = this.userInfo;
            let title = "动态";
            let { siteroot } = siteInfo;
            let url = siteroot.split("/index.php")[0];
            let href = `${url}/h5/#/pages/dynamic?pid=${pid}`;
            let imageUrl = "";
            this.$jweixin.wxReady(() => {
                this.$jweixin.showOptionMenu();
                this.$jweixin.shareAppMessage(title, "", href, imageUrl);
                this.$jweixin.shareTimelineMessage(title, href, imageUrl);
            });
        },
        async handerTabChange(index) {
            this.updateDynamicItem({
                key: "activeIndex",
                val: index,
            });

            this.$util.showLoading();
            uni.pageScrollTo({
                scrollTop: 0,
            });
            await this.getList(1);
            if (index == 1) {
                await this.getDynamicIndex();
            }
        },
        toSearch(val) {
            this.param.coach_name = val;
            this.getList(1);
        },
        async getList(flag) {
            if (flag) {
                this.param.page = 1;
                this.list.data = [];
            }
            let { location } = this;
            if (!location.lat) {
                // #ifdef H5
                if (this.$jweixin.isWechat()) {
                    this.$util.showLoading();
                    // await this.$jweixin.initJssdk();
                    await this.$jweixin.wxReady2();
                    let { latitude: lat = 0, longitude: lng = 0 } =
                        await this.$jweixin.getWxLocation();
                    location = {
                        lng: "126.56279",
                        lat: "45.80825",
                        address: "定位失败",
                        province: "",
                        city: "",
                        district: "",
                    };
                    if (lat && lng) {
                        let key = `${lat},${lng}`;
                        let data = await this.$api.base.getMapInfo({
                            location: key,
                        });
                        let { status, result } = JSON.parse(data);
                        if (status == 0) {
                            let { address, address_component } = result;
                            let { province, city, district } =
                                address_component;
                            location = {
                                lng,
                                lat,
                                address,
                                province,
                                city,
                                district,
                            };
                        }
                    }
                }
                // #endif
                // #ifndef H5
                location = await this.$util.getBmapLocation();
                // #endif
                this.updateUserItem({
                    key: "location",
                    val: location,
                });
            }
            let { lat = 0, lng = 0 } = location;

            let { list: oldList } = this;
            let param = Object.assign({}, this.param, {
                lat,
                lng,
                id: this.second_id,
                children: 2,
                cate_id: this.second_id,
                type: this.children,
                area: this.area_id,
            });
            await this.getDynamicList(param);
            this.isLoad = true;
            this.loading = false;
            this.$util.hideAll();
        },
        toAddDynamic(type) {
            this.$refs.show_item.close();
            this.$util.goUrl({
                url: `/dynamic/pages/technician/edit?type=${type}`,
            });
        },
        goCate(e) {
            console.log(e);
            this.secondlist = e.children;
            this.first_id = e.id;
            this.second_id = e.children.length ? e.children[0].id : e.id;
            this.getList(1);
        },
        choseSecond(id, index) {
            this.second_id = id;
            this.getList(1);
            console.log(this.list, "list");
        },
        changeTab(e) {
            console.log(e, "动态页点击");
            if (e == 0) {
                this.$func.jump("/pages/service");
            } else if (e == 1) {
                this.$func.jump("/wNew/pages/classification?type=1&showBack=none");
            } else if (e == 2) {
                this.$func.jump("/live/pages/live/liveList?type=1");
            } else if (e == 3) {
                if (uni.getStorageSync("configInfo").live_switch == 0) {
                    this.$func.jump("/subPages/technician/tabBar/mine");
                } else {
                    return;
                    this.$func.jump("/pages/dyamicshop?children=2");
                }
            } else if (e == 4) {
                this.$func.jump("/subPages/technician/tabBar/mine");
            }
        },
    },
    onUnload() {
        uni.removeStorageSync("category_id");
    },
    onHide() {
        uni.removeStorageSync("category_id");
    },
};
</script>


<style lang="scss">
@import url(@/components/common.css);
.pages-dynamic {
    .fix-info {
        height: 225rpx;

        .space-top {
            width: 100%;
            height: 40rpx;
            top: 0;
        }

        .search-info {
            width: 100%;
            top: 0;

            .dynamic-btn {
                width: 134rpx;
                height: 56rpx;
                transform: rotateZ(360deg);

                .iconfont {
                    font-size: 24rpx;
                    margin-right: 6rpx;
                }
            }
        }
    }

    .show-popup {
        width: 750rpx;
        background: #f3f3f5;
        border-radius: 30rpx 30rpx 0 0;

        .avatar {
            width: 84rpx;
            height: 84rpx;
        }

        .show-item {
            color: #222;
            height: 100rpx;
            background: #fff;
        }
    }
}

.column-img {
    width: 94rpx;
    height: 94rpx;
    margin: 0 auto;
    border-radius: 50%;
}

.column-text {
    margin-top: 10rpx;
    text-align: center;
    color: #484848;
    width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 24rpx;
}

.allbtn {
    position: absolute;
    right: 0;
    z-index: 999;
    top: 0;
    padding-top: 30rpx;
    padding-right: 20rpx;
    padding-left: 20rpx;
    background: #fff;
}

.top_fenlei {
    // height: 8%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 20rpx 20rpx 20rpx;
    background: #fff;
}

.fenlei {
    background-color: #f5f5f5;
    // min-width: 100rpx;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    border-radius: 150rpx;
    // margin: 0 20rpx 10rpx 0;
    padding: 0 30rpx;
    color: #888888;
}

.fenlei_active {
    background-color: #f5f5f5;
    // min-width: 100rpx;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    border-radius: 150rpx;
    // margin: 0 20rpx 10rpx 0;
    padding: 0 30rpx;
    color: #606dce;
}

.space-md {
    height: 130px;
}

.catebg {
    padding: 30rpx 0;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
}
.coverimg {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}
.border-06 {
    border: #606dce 2rpx solid;
}
.listbox {
    width: 750rpx;
    column-count: 2;
    column-gap: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 20rpx;
}

.demo-warter {
    border-radius: 8px;
    margin-bottom: 15rpx;
    background-color: #ffffff;
    // padding: 8px;
    position: relative;
    width: 340rpx;
    display: inline-block;
    overflow: hidden;
}

.wf-item {
    padding: 20rpx;

    .avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 40rpx;
        margin-right: 6rpx;
    }

    .coach {
        max-width: 100rpx;
    }

    .iconfont {
        font-size: 24rpx;
    }
}
</style>